<template>
<div class="layout-app">
	<!-- main -->
		<!-- 查看 -->
	<div class="addAcc">
			<!-- tabs -->
			<div class="tabs">
				<div class="tabsMain">
					<!-- 表单 -->
					<el-form ref="form" :model="addForm" label-width="80px" size="mini">
					<el-row :gutter="20">
						  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
							  <!-- input -->
							  <el-form-item v-if="v.type == 'input'" :label="v.label">
								<el-input :suffix-icon='v.prefix' v-model="$data.addForm[v.modelValue]" :placeholder="v.placeholder" :disabled="v.disabled" ></el-input>
							  </el-form-item>
						  </el-col>
						</el-row>

					</el-form>
					<div class="empty"></div>
				</div>
				
			</div>
		  <div slot="footer" class="dialog-footer">
			<el-button size="mini" @click="handleAddClose">关闭</el-button>
		  </div>
		
	</div>
</div>
</template>

<script>
// self
// import AccType from './AccType.js'
// import country from './country.js'
// import nationality from './nationality.js'
// prop
// import addAccTable from './addAccTable.vue'
// import addAccStations from './addAccStations.vue'
// import addAccIntruce from './addAccIntruce.vue'
// ext
import { getLunar } from 'chinese-lunar-calendar'

// 接口
// import { getArea,getArea2,getArea3,addStaff } from "@/api/user.js";
export default {
	components:{
		
	},
	data(){
		return{
			//str
			value:'',
			deptCode:'',
			getLunarDay: '',
			areaCode:'',
			areaPName:'',
			idx:'',
			year: new Date().getFullYear(),
			month: new Date().getMonth() + 1,
			date: new Date().getDate(),
			lunarDate: '',//农历
			// 1 - 3
			firstName:'',
			seconedName:'',
			thirdName:'',
			//num
			
			//ble
			disabled:true,
			selectDisabled:true,
			dialogFormVisible:false,
			//arr
			formType:[
				{ label:'业务日期：',spanRows:8,type:'input',modelValue:'educationalBackground',placeholder:'2025-2-20',disabled:true},
				{ label:'单据编号：',spanRows:8,type:'input',modelValue:'educationalBackground',placeholder:'2502000024',disabled:true},
				{ label:'时间：',spanRows:8,type:'input',modelValue:'educationalBackground',placeholder:'2025-02-21 08:52:17',disabled:true},
				{ label:'库房名称：',spanRows:24,type:'input',modelValue:'major',im:false,placeholder:'西药库',disabled:true},
				{ label:'供货单位：',spanRows:12,type:'input',modelValue:'educationalBackground',placeholder:'宜宾骅光医疗器械有限公司',disabled:true},
				{ label:'供货单号：',spanRows:12,type:'input',modelValue:'educationalBackground',placeholder:'',disabled:true},
				{ label:'发票编号：',spanRows:12,type:'input',modelValue:'major',placeholder:'',placeholder:'',disabled:true },
				{ label:'开票日期：',spanRows:12,type:'input',modelValue:'educationalBackground',placeholder:'',disabled:true},
				{ label:'备注：',spanRows:24,type:'input',modelValue:'educationalBackground',placeholder:'',disabled:true },
			],
			idType:[
				{id:1,label:'居民身份证',value:'居民身份证'},{id:2,label:'中国人民解放军军人身份证件',value:'中国人民解放军军人身份证件'},
				{id:3,label:'中国人民武装警察身份',value:'中国人民武装警察身份'},{id:4,label:'‌港澳居民来往内地通行证‌',value:'港澳居民来往内地通行证‌‌港澳居民居住证‌'},
				{id:5,label:'台湾居民来往大陆通行证',value:'台湾居民来往大陆通行证'},{id:6,label:'护照',value:'护照'},
				{id:7,label:'外国人永久居住证‌',value:'外国人永久居住证‌‌'},{id:8,label:'其他',value:'其他'},
			],//证件类型
			sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
			marryiedOptions:[{id:1,label:'未婚',value:'未婚'},{id:2,label:'已婚',value:'已婚'},{id:3,label:'离异',value:'离异'},{id:4,label:'丧偶',value:'丧偶'},{id:5,label:'再婚',value:'再婚'}],
			statusOptions:[{id:1,label:'是',value:'是'},{id:2,label:'否',value:'否'}],
			bloodOptions:[{id:1,label:'A型血',value:'A型血'},{id:2,label:'B型血',value:'B型血'},{id:3,label:'O型血',value:'O型血'},{id:4,label:'AB型血',value:'AB型血'},{id:5,label:'RH（熊猫）型血',value:'RH（熊猫）型血'}],
			PoliticalOptions:[
				{id:1,label:'群众',value:'群众'},{id:2,label:'无党派人士',value:'无党派人士'},{id:3,label:'台湾民主自治同盟盟员',value:'台湾民主自治同盟盟员'},{id:4,label:'九三学社社员',value:'九三学社社员'},
				{id:5,label:'中国致公党党员',value:'中国致公党党员'},{id:6,label:'中国农工民主党党员',value:'中国农工民主党党员'},{id:7,label:'中国民主促进会会员',value:'中国民主促进会会员'},
				{id:8,label:'中国共产主义青年团团员',value:'中国共产主义青年团团员'},{id:9,label:'中国共产党预备党员',value:'中国共产党预备党员'},{id:9,label:'中国共产党党员',value:'中国共产党党员'},
			],
			//obj

			addForm:{
				date:'2025-2-21',
				name: "西药库", //药房名称
				ghdw:"宜宾骅光医疗器械有限公司",//供货单位
				idNumber: "", //身份证号码
				sex: "",//性别
			},
			options:[],

		}
	},
	mounted() {
		
	},
	methods:{
		// 时间处理
		changDate(val){
			let i = this.idx
			switch(i) {
				case 5:
				function formatDate(date) {
				  const year = date.getFullYear();
				  const month = (date.getMonth() + 1).toString().padStart(2, '0');
				  const day = date.getDate().toString().padStart(2, '0');
				  return `${year}-${month}-${day}`;
				}
				 
				// 使用示例
				const now = new Date();
				this.addForm.dateOfEmp = formatDate(val);
			}
		},
		handleSelectCost(val) {
		  this.addForm.nativePlace = val.join(',')
		},

		// 打开model
		openModel(){
			this.dialogFormVisible = true;
		},
		// 关闭
		handleAddClose(done) {
			this.$emit('watchDialog')
		},
	},
	
}
</script>

<style lang="less" scoped>
.layout-app{
    width: 100%;
    height: 100%;
    display: flex;
	background-color: f8f8f8;
    .addAcc{
		/deep/ .el-dialog__header{
			padding: 12px;
			background-color: #007bb0;
		}

		/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
			margin-bottom: 8px;
		}
		/deep/ .el-dialog__title{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
			background-color: brown;
		}
		/deep/ .el-dialog__body{
			padding: 0;
		}
		/deep/ .el-divider--horizontal{
			margin: 0;
		}
		/deep/ .el-form-item__label{
			display: flex;
			justify-content: right;
			font-size: 12px;
		}
		// self
		// 选项卡
		.tabs{
			width: 688px;
			.tabsMain{
				display: flex;
				justify-content: space-between;
				width: 100%;
				border: 1px solid #d8d8d8;
				margin-bottom: 8px;
				padding: 12px;
				.a{
					flex: 1;
					display: flex;
					align-items: center;
				}
				.empty{
					flex: 2;
				}
				.tabs-right{
					flex: 1;
					padding:12px;
					margin-left: 8px;
					border: 1px solid #e8f0ee;
				}
			}
			
			
		}
	}
}
</style>